<template>
  <Layout class="base-layout" :style="{ height: '100vh' }">
    <Layout.Header class="layout-header">
      <div class="layout-header-logo">
        <!-- <img src="@/assets/images/logo.png" alt="" :style="{ width: '40px', height: '40px', verticalAlign: 'top' }" /> -->
        <h1>陌离的秘密基地</h1>
      </div>
      <div :style="{ flex: 1 }">
        <ul class="center-nav-title">
          <li class="nav-item" v-for="item of menuData" :key="item.key" @click="changePath(item.path, item.key)">
            <span class="nav-item-title" :class="{ active: activeRouter == item.key }"> {{ item.name }} </span>
          </li>
        </ul>
      </div>
    </Layout.Header>
    <Layout>
      <Layout.Content>
        <RouterView />
      </Layout.Content>
    </Layout>
  </Layout>
</template>

<script setup lang="ts">
import { Layout } from 'ant-design-vue';
import { onBeforeMount, ref, watch } from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';
// import { useMouseAnimate } from '@/utils/mouseMove';
import menuData from './base-menu';

const selectKeys = ref<string[]>([]);
const openKeys = ref<string[]>([]);
const collapsed = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
const activeRouter = ref();

// useMouseAnimate();

const changePath = (path: string, key: string) => {
  activeRouter.value = key;
  router.push(path);
};

const getDefaultSelectAndOpenKeys = (): void => {
  let defaultSelectKeys: string[] = ['home'];
  let defaultOpenKeys: string[] = [];
  const routeMatched = [...route.matched];
  console.log('routeMatched', routeMatched);

  if (routeMatched.length > 0) {
    const selectPath = routeMatched.pop();
    const currentSelectKey: string = (selectPath?.name || selectPath?.meta?.parentName) as string;
    console.log('currentSelectKey', currentSelectKey);
    if (currentSelectKey) {
      defaultSelectKeys = [currentSelectKey];
      activeRouter.value = currentSelectKey;
    }
    if (routeMatched.length > 0) {
      defaultOpenKeys = routeMatched.map((routeMatchedItem) => {
        return routeMatchedItem?.name as string;
      });
    }
    selectKeys.value = defaultSelectKeys;
    openKeys.value = defaultOpenKeys;
    console.log('openKeys', openKeys.value, selectKeys.value);
  }
};
onBeforeMount(() => {
  getDefaultSelectAndOpenKeys();
});
</script>

<style scoped lang="scss">
@import '@/styles/layout.scss';
</style>
